<template>
  <div>
    <h1>动态组件</h1>
    <button @click="comName = 'MyLeft'">Left</button>
    <button @click="comName = 'MyRight'">Right</button>
    <!-- 动态组件使用 <component :is="组件名"></component> 来展示组件 -->
    
    <!-- 加入<keep-alive>之后默认所有的动态组件都会保持状态不会被销毁 -->
    <!-- include 用于指定哪些组件需要被缓存，未指定的组件都不会被缓存 -->
    <!-- exclude 用于指定哪些组件不需要被缓存，未指定的组件都会被缓存 -->
    <!-- 如果指定多个组件，多个组件之间用逗号隔开，【注意：不能加空格】  -->
    <!-- exclude="MyLeft,MyRight" -->
    <!-- include="MyLeft,MyRight" -->
    <keep-alive include="MyLeft,MyRight">
       <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
  components: { MyLeft, MyRight },
  data () {
    return {
      comName: 'MyLeft'
    }
  }
}
</script>

<style scoped>
h1{
  color: #8df;
}
</style>